<template>
    <div class="content_base">
        <div class="upTo">
            <h2 class='title'>填写前期工作进度月报信息</h2>
            <el-form :model="upTo" ref="upTo" :rules="rules" label-position = 'right' status-icon class="clearfix" >
              <el-form-item label="圩堤名称：">
                <div class="wid">{{upTo.dikeName}}</div>
                </el-form-item>
              <el-form-item label="所在设区市：">
                <div class="wid">{{upTo.city}}</div>
              </el-form-item>
              <el-form-item label="属地：">
                <div class="wid">{{upTo.county}}</div> 
              </el-form-item>
              <el-form-item label="用地预审：" v-if="status==1">
                <div class="wid">{{upTo.landPreExam}}</div>
              </el-form-item>
              <el-form-item label="用地预审：" prop="landPreExam" v-else>
                <el-input v-model="upTo.landPreExam"></el-input>
              </el-form-item>
              <el-form-item label="规划选址："  prop="planAddress">
                <!-- <el-input v-model="upTo.planAddress"></el-input> -->
                <el-select v-model="upTo.planAddress" clearable placeholder="请选择">
                 <el-option
                    v-for="item in guihua"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="可研报告：" prop="researchReport">
                <el-select v-model="upTo.researchReport" clearable placeholder="请选择">
                <el-option
                    v-for="item in baoGstatu"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
               </el-select>
              </el-form-item>
              <el-form-item label="可研批复投资（万元）：" v-if="status==1">
                <div class="wid">{{upTo.permissibleInvest}}</div>
              </el-form-item>
              <el-form-item label="可研批复投资（万元）：" prop="permissibleInvest" v-else>
                <el-input v-model="upTo.permissibleInvest" ></el-input>
              </el-form-item>
              <el-form-item label="初设（代可研报告）："  prop="initReport">
                <el-select v-model="upTo.initReport" clearable placeholder="请选择">
                <el-option
                    v-for="item in baoGstatu"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
               </el-select>
              </el-form-item>
              <!--status==1表示已经进行第一次上报  -->
              <template v-if="status==1">
                 <el-form-item label="初设批复治理长度（km）：">
                   <div class="wid">{{upTo.initPermissiableLength}}</div>
                 </el-form-item>
                 <el-form-item label="初设批复投资（万元）：">
                   <div class="wid">{{upTo.initPermissibleInvest}}</div>
                 </el-form-item>
                 <el-form-item label="投标--分标段（个）：">
                   <div class="wid">{{upTo.tenderCase}}</div>
                 </el-form-item>
                 <el-form-item label="投标--投标金额（万元）：">
                   <div class="wid">{{upTo.tenderCapital}}</div>
                 </el-form-item>
              </template>
              <template v-else>
                 <el-form-item label="初设批复治理长度（km）：" prop="initPermissiableLength">
                   <el-input v-model="upTo.initPermissiableLength" ></el-input>
                 </el-form-item>
                 <el-form-item label="初设批复投资（万元）：" prop="initPermissibleInvest" >
                   <el-input v-model="upTo.initPermissibleInvest" ></el-input>
                 </el-form-item>
                 <el-form-item label="投标--分标段（个）：" prop="tenderCase">
                   <el-input v-model="upTo.tenderCase" ></el-input>
                 </el-form-item>
                 <el-form-item label="投标--投标金额（万元）：" prop="tenderCapital" >
                   <el-input v-model="upTo.tenderCapital" ></el-input>
                 </el-form-item>
              </template>
              <el-form-item label="投标--招标是否完成：" prop="tenderSuccess" >
               <el-select v-model="upTo.tenderSuccess" clearable placeholder="请选择" >
                <el-option
                    v-for="item in isDown"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
               </el-select>
              </el-form-item>
               <el-form-item label="是否开工：" prop="start">
                <el-select v-model="upTo.start" clearable placeholder="请选择">
                <el-option
                    v-for="item in isDown"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
               </el-select>
              </el-form-item>
              <el-form-item label="上报人姓名：" prop="reportPeople" >
                   <el-input v-model="upTo.reportPeople" ></el-input>
               </el-form-item>
              <el-form-item label="存在问题：">
                <el-input type="textarea"
                 v-model="upTo.existProblem"
                 class=""
                :autosize="{ minRows: 4,maxRows:20}"></el-input>
              </el-form-item>
              <el-form-item label="备注：">
                <el-input type="textarea"
                 v-model="upTo.note"
                 class=""
                :autosize="{ minRows: 4,maxRows:20}"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="sureUpto('upTo')" v-if="upTo.state==0||upTo.state==null">确认上报</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import Bus from '../../Bus.js'
export default {
    data(){
        //检验是否是数字
        var checkNumber = (rule,value,callback)=>{
            var val = value.replace(/\s/g,"")
          if(val==''){
            return callback(new Error('请填入数据'))
          }else{ 
              val = Number(val)
              if(val!==0&&!val){
                return callback(new Error('请填入正确的数据'))
                }else{
                  return callback()
                }
          }
         }
        return{
              //上报的数据
          upTo:{
                  dikeName:'', 
                  city:'', 
                  county:'',
                  // protectArea:'',//保护面积
                  // protectCultivateArea:'',//保护耕地面积
                  // protectPeople:'',//保护人口
                  // dikeLength:"",//堤线长度
                  landPreExam: '',//用地预审
                  planAddress: '',//规划选址
                  researchReport: '',//可研报告
                  permissibleInvest:'',//可批复投资
                  dikeCode: '',
                  initReport: '',//初设报告
                  initPermissiableLength:'',//可批复长度
                  initPermissibleInvest:'',//初设可批复投资
                  tenderCase:'',//分标段
                  tenderCapital:'',//招标金额
                  tenderSuccess: '',//招标是否成功1-成功  2-失败
                  existProblem: '',//存在问题
                  start:'',//是否开工1--开工0--为开工
                  reportPeople:'',//上报人姓名
             },
             //第一个月是否上报的状态
             status:'',
          rules: {
            //数字
              permissibleInvest: [
                {validator: checkNumber, required: true, trigger: 'blur' },
                // {type:'number',required: true, message: '请填写合理数据', trigger: 'blur'} 
              ],
              initPermissiableLength: [
                {validator: checkNumber, required: true, trigger: 'blur' },
                // {type:'number',required: true, message: '请填写合理数据', trigger: 'blur'} 
              ],
              initPermissibleInvest: [
                {validator: checkNumber, required: true, trigger: 'blur' },
                // {type:'number',required: true, message: '请填写合理数据', trigger: 'blur'} 
              ],
              tenderCapital: [
                {validator: checkNumber, required: true, trigger: 'blur' },
                // {type:'number',required: true, message: '请填写合理数据', trigger: 'blur'} 
              ],
              tenderCase:[
                {validator: checkNumber, required: true, trigger: 'blur' },
              ],
              //选择
              planAddress:[
                {required: true, message: '请选择', trigger: 'change'}
              ],
              researchReport:[
                {required: true, message: '请选择', trigger: 'change'}
              ],
              initReport:[
                {required: true, message: '请选择', trigger: 'change'}
              ],
              tenderSuccess:[
                {required: true, message: '请选择', trigger: 'change'}
              ],
              start:[
                {required: true, message: '请选择', trigger: 'change'}
              ],
              //文字
              landPreExam:[
                {required: true, message: '请填写', trigger: 'blur'} 
              ],
              reportPeople:[
                {required: true, message: '请填写上报人姓名', trigger: 'blur'} 
              ]
            
        },
             //两个文件的下载地址和名字的初始化以及所需要传递的参数
            //  upTo1:{
            //      code:'',
            //      dikeCode:''
            //  },
            //  upTo2:{
            //      code:'',
            //      dikeCode:''
            //  },
            //是否的选择等下拉选择
           isDown:[
               {label:'是',value:'是'},
               {label:'否',value:'否'}
           ],
           baoGstatu:[{name:'未动'},{name:'在编'},{name:'待审'},{name:'已审'},{name:'已批'}],
           guihua:[{name:'完成'},{name:'未完成'}],
           //本条数据的代码
           localData:{
               dikeCode:null,
               reportDate:null,
           },
          //  rules
           ruleForm:{
             isNumber:''
           },
        }
    },
    methods:{
       //获得三条基本的数据
         getBaseData(upTo){
            var _this = this ;
            var text = []
            var thisDate = (new Date()).getTime()
            this.$axios.get(`/dikeInfo/getdikeinfobycode/${this.localData.dikeCode}`,{params:{
               thisDate:thisDate
             }}).then(function(res){
                var codeMes = res.data.responseCode
                if(codeMes=='101'){
                       _this.$router.push({name:'login'})
                  }else{
                  var data  = res.data.responseData
                  upTo.dikeName=data.dikeName
                  upTo.city=data.city
                  upTo.county=data.county  
                }
            })
           
        },
        //初始化第一个月上报的数据
        getFirstMouth(){
          var _this = this
          var thisDate = (new Date()).getTime()
          this.$axios.get(`/dikeInfo/getfirstmonthinfo/PRE/${this.localData.dikeCode}`,{params:{
            thisDate:thisDate
          }}).then(function(res){
            var data = res.data.responseData
            _this.status = data.status
            if(_this.status==1){
               var data = data.data
               for(var item in data){
                 _this.upTo[item] = data[item]
               }
            }
          })
        },
        //确认上报点击事件
        sureUpto(upTo){
          var _this = this 
          this.$refs[upTo].validate((valid) => {
             if (valid) {
                    upTo = _this[upTo]
                   upTo.operand = 2
                   upTo.dikeCode = this.$route.params.dikeCode;
                   this.getData(upTo)
                   this.getNewData()
               } else {
               return false;
              }
           });
        },
        //确认上报---------发送请求
        getData(upTo){
          var _this = this
          this.$axios.post('/projectearly/entryprojectinfo',upTo).then(function(res){
           var codeMes = res.data.responseCode
           if(codeMes=='101'){
                   _this.$router.push({name:'login'})
             }else{
               var data = res.data.responseMessage
               if(data=='录入成功'){
                 _this.$message({
                       message: '上报成功',
                       type: 'success'
                     });
                  Bus.$emit('changestate')
                 _this.$router.push({name:'prejinzhang'})
               }else{
                  _this.$message({
                       message: data+''
                     });
               }
            }
          }).catch(function(err){
            console.log(err)
          })
        },
        //接收上传了的数据或者驳回后的初始数据，为0则显示空---------注意为县级用户
        getNewData(){
          var _this = this 
          // this.$axios.get('/projectearly/getprojectinfo',{params:this.localData}).then(function(res){
          //   var data =res.data.responseData[0]
          //   if(data){
          //     for(var item in data){
          //         _this.upTo[item] = data[item]
          //     }
          //     console.log(data)
          //     if(data.length!=0){
          //     for(var item in _this.upTo){
          //         if(_this.upTo[item]=='0'){
          //            _this.upTo[item] = ''
          //         }
          //        }
          //       }
          //    }
          //     _this.getBaseData(_this.upTo)
          //     console.log(_this.upTo)
          //    }).catch(function(err){
          //        console.log(err)
          // })
          _this.getBaseData(_this.upTo)
           _this.getFirstMouth()
        },
    },
    mounted(){
        var _this = this
        this.localData.dikeCode = this.$route.params.dikeCode;
        //获得已经上报了的数据
        _this.getNewData()
    }
}
</script>

<style scoped>
   .clearfix:after{
        content: '';
        height: 0;
        clear: both;
        display: block;
   }
   .title{
       height: 100px;
       line-height: 100px;
   }
   .upTo{
       width: 90%;
       margin: 0 auto;
   }
   .upTo .el-form-item{
       width: 40%;
       float: left;
       margin-left:6%;
       position: relative;

   }
   .el-form-item .wid{
     width: 130px;
     float: left;
     text-align: center
   }
   .el-input,.el-select{
       width:130px;
       position: absolute;
       left:230px;
       float: left;
   }
   .el-textarea{
     width: 40%;

   }
   .dialog-footer{
       height: 100px;
       line-height: 100px
   }
</style>